<template>
  <div class="me">
    <van-nav-bar left-text="商家入驻" fixed>
      <template #right>
        <van-icon name="service-o" size="18" />
        <van-icon name="setting-o" size="18" />
        <van-icon name="chat-o" size="18" badge="1" />
      </template>
    </van-nav-bar>

    <div class="we">
      <div class="f1">
        <div class="img">
          <van-image
            round
            fit="cover"
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <van-uploader :after-read="afterRead" />
        </div>
        <div class="right">
          <span>请登录</span>
          <span>设置我们的婚期</span>
          <span>0发布 | 0关注</span>
        </div>
      </div>
      <div class="f2">
        <van-grid :column-num="3">
          <van-grid-item icon="/img/me-icon/1-1.png" text="0元兑喜糖" />
          <van-grid-item to="/guanjia" icon="/img/me-icon/1-2.png" text="结婚管家" />
          <van-grid-item icon="/img/me-icon/1-3.png" text="开通会员" />
        </van-grid>

        <van-grid :column-num="5" square>
          <van-grid-item icon="star-o" text="收藏 0" />
          <van-grid-item icon="guide-o" text="足迹 1" />
          <van-grid-item icon="pending-payment" text="卡券钱包" />
          <van-grid-item icon="cart-o" text="购物车" />
          <van-grid-item icon="todo-list-o" text="订单预约" />
        </van-grid>
      </div>
      <div class="f3">
        <div class="f31">
          <span class="f311">我的备婚进度</span>
          <van-button plain type="danger" size="mini" round>进入</van-button>
        </div>
        <div class="f32">
          <p>0/21</p>
          <van-progress color="#ee0a24" :percentage="0" />
        </div>
        <div class="f33">
          <p>待完成</p>
          <p>确定婚礼举办地和场次</p>
        </div>
      </div>
      <div class="f4">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="/img/swipe/me/1.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/swipe/me/2.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/swipe/me/3.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/swipe/me/4.jpg" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="f5">
        <van-grid>
          <van-grid-item icon="/img/me-icon/2-1.png" text="电子请帖" />
          <van-grid-item icon="/img/me-icon/2-2.png" text="婚礼MV" />
          <van-grid-item icon="/img/me-icon/2-3.png" text="灵感图库" />
          <van-grid-item icon="/img/me-icon/2-4.png" text="黄道吉日" />
        </van-grid>
      </div>
      <div class="f6">
        <van-grid>
          <van-grid-item icon="/img/me-icon/3-1.png" text="宣言誓言" />
          <van-grid-item icon="/img/me-icon/3-2.png" text="大婚流程" />
          <van-grid-item icon="/img/me-icon/3-3.png" text="婚品清单" />
          <van-grid-item icon="/img/me-icon/3-4.png" text="八字择吉日" />
          <van-grid-item icon="/img/me-icon/3-5.png" text="婚姻预约登记" />
          <van-grid-item icon="/img/me-icon/3-6.png" text="婚姻登记处" />
          <van-grid-item icon="/img/me-icon/3-7.png" text="结婚预算" />
          <van-grid-item icon="/img/me-icon/3-8.png" text="备婚打卡" />
          <van-grid-item icon="/img/me-icon/3-9.png" text="宣告结婚" />
          <van-grid-item icon="/img/me-icon/3-10.png" text="今日金价" />
          <van-grid-item icon="/img/me-icon/3-11.png" text="结婚账本" />
          <van-grid-item icon="/img/me-icon/3-12.png" text="婚礼现场" />
        </van-grid>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="fire-o">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 3,
    };
  },
  methods: {
    afterRead(file) {
      
      console.log(file);
    },
  },
};
</script>

<style lang="scss">
.me .van-tabbar-item--active {
  color: red;
}
.me .van-nav-bar {
  background-color: #fff;
  z-index: 5;
  .van-icon {
    color: #000;
    margin-right: 5px;
  }
}
.me .van-nav-bar__text {
  color: #000;
  font-family: "微软雅黑";
  font-weight: 500;
  font-size: 15px;
}
.me .we {
  margin-top: 46px;
  margin-bottom: 50px;
  padding: 10px;
  background-color: #f8f8f8;

  .f1 {
    display: flex;
    align-items: center;

    .img {
      display: flex;
      margin: 10px 0 15px 10px;
      .van-image:nth-child(1) {
        z-index: 1;
      }
      .van-uploader__upload {
        width: 48px;
        height: 48px;
        margin: 0 8px 8px -8px;
        border-radius: 50%;
        background-color: #f8f8f8;
      }
    }
    .right span {
      display: flex;
      margin-left: 20px;
      line-height: 22px;
    }
    .right span:nth-child(1) {
      font-size: 15px;
      font-weight: 600;
    }
    .right span:nth-child(2) {
      font-size: 12px;
      color: gray;
    }
    .right span:nth-child(3) {
      font-size: 12px;
    }
  }
  .f2 .van-grid {
    margin-bottom: 10px;
  }
  .f3 {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;

    .f31 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .f311 {
        font-size: 15px;
      }
      .van-button--mini {
        height: 15px;
        padding: 0 14px;
      }
    }
    .f32 {
      display: flex;
      justify-content: start;
      align-items: center;
      p {
        font-size: 12px;
        color: gray;
      }
      .van-progress {
        flex: 1;
        margin-left: 10px;
      }
    }
    .f33 {
      display: flex;
      font-size: 13px;
      p {
        margin: 0;
      }
    }
    .f33 p:nth-child(1) {
      color: red;
    }
    .f33 p:nth-child(2) {
      margin-left: 5px;
      color: rgb(119, 114, 114);
    }
  }
  .f4 {
    border-radius: 10px;
    margin-bottom: 10px;

    img {
      width: 100%;
      border-radius: 10px;
    }
  }
  .f5 {
    margin-bottom: 10px;
  }
}
</style>
